<template>
<div class="wraper">
  <div class="search-box">
    <span>订单编号：</span>
<el-input placeholder="订单编号查询"></el-input>
<span>客户姓名：</span>
<el-input placeholder="客户姓名查询"></el-input>
<span>单位：</span>
<el-input placeholder="单位查询"></el-input>
  <div class="block">
    <span class="demonstration">订单日期：</span>
    <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
  </div>




  </div>
<div class="middle-box">

    <div class="type">
     <el-button type="primary">导出大客户订单列表到Excel</el-button>
     <span>
       卡类型：
     </span>
      <el-radio v-model="radio" label="1">实体卡</el-radio>
       <el-radio v-model="radio" label="2">虚拟卡</el-radio>

  </div>
  <div class="btns">
     <el-button> <i class="el-icon-search"></i> 查询</el-button>
      <el-button><i class="el-icon-refresh-right"></i> 重置</el-button>

  </div>
</div>

  <div class="middle-left">
      

  </div>
  <router-view></router-view>
</div>

</template>

<script>
export default {
  data () {
      return {
        radio: '1',
          activeName: 'first',
          
        shortcuts: [{
          text: '最近一周',
          value: (() => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
          })(),
        }, {
          text: '最近一个月',
          value: (() => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
          })(),
        }, {
          text: '最近三个月',
          value: (() => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
          })(),
        }], value1: '',
        value2: '',
         tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        }, {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        }],
        



}
},
 methods: {
      handleClick(row) {
        // console.log(row);
      }
    },


}

</script>

<style>
.wraper{
  margin: 30px 30px auto 30px;
  width: 1280px;
}
.search-box{

  display: flex;
  justify-content: space-between;

}
.fivetabs{
  width: 100%;
  height: 40px;
  border: 1px solid orange;

}
.middle-box{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.middle-left{
  display: flex;
}
.search-box input{
  width: 240px;
}
.block{
  display: flex;
}


</style>